<template>
	<div>
		<div style="margin-top: 28px;">
			<el-input size="small" clearable v-model="inputMajor" style="width: 220px;margin-right: 10px;" placeholder="请输入专业"></el-input>
			<el-button size="small" type="primary" @click="addMajor">添 加</el-button>
			<el-button size="small" type="danger" @click="deleteMajor">删 除</el-button>
			
		</div>
		<div style="margin-top: 20px;">
			<el-collapse v-model="activeName" accordion @change="change">
				<el-collapse-item v-for="(item,index) in majors" :key="index" :title="item.name" :name="item.id">
					<div>
						<el-tag style="margin-left: 8px;" v-for="(value,index2) in classes" :key="index2">{{ value.name }}
							<el-popconfirm
							  title="这个班级确定删除吗？"
							  @onConfirm="deleteClass(value.id)"
							>
							<el-button style="padding: 7px;color: red;" size="small" icon="el-icon-delete" slot="reference"></el-button>
							</el-popconfirm>
						</el-tag>
					</div>
					<div style="margin-top: 5px;">
						<el-input size="small" clearable v-model="inputClass" style="width: 180px;margin-left: 7px;margin-right: 10px;" placeholder="请输入班级"></el-input>
						<el-button size="small" type="primary" @click="addClass(item.id)">添 加</el-button>
					</div>
				</el-collapse-item>
			</el-collapse>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				inputMajor: '',
				inputClass: '',
				theMajor: {},
				theClass: {},
				activeName: 0,
				majors: [],
				classes: [],
				requiredId: 0,
			}
		},
		mounted() {
			this.initMajors();
		},
		methods:{
			initMajors(){
				this.getRequest('/system/major_class/majors').then(resp => {
					if(resp) {
						this.majors = resp;
					}
				})
			},
			initClasses(){
				this.getRequest('/system/major_class/classes/' + this.requiredId).then(resp => {
					if(resp) {
						this.classes = resp;
					}
				})
			},
			change(val){
				if(val == null || val == '') {
					
				}else{
					this.requiredId = val;
					this.initClasses();
				}
			},
			addMajor(){
				this.theMajor.name = this.inputMajor;
				this.postRequest('/system/major_class/major/', this.theMajor).then(resp => {
					if(resp) {
						this.initMajors();
						this.inputMajor = '';
					}
				})
			},
			deleteMajor() {
				this.theMajor.name = this.inputMajor;
				this.$confirm('此操作将删除此专业, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest('/system/major_class/major/',this.theMajor).then(resp => {
						if(resp) {
							this.inputMajor = '';
							this.initMajors();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消提交'
					});
				});
					
			},
			addClass(data) {
				this.theClass.majorId = data;
				this.theClass.name = this.inputClass;
				this.postRequest('/system/major_class/class/', this.theClass).then(resp => {
					if(resp) {
						this.inputClass = '';
						this.initClasses();
					}
				}) 
			},
			deleteClass(data) {
				this.deleteRequest('/system/major_class/class/' + data).then(resp => {
					if(resp) {
						this.initClasses();
					}
				})
			},
		}
	}
</script>

<style>
</style>
